import React, {createRef, useState} from "react";
import {Button, Input, Select} from "antd";
import '../parking-unit.scss'
import './addUnit.scss'
import {getRefValue} from "../../../utils/refUtils";
import {addOrg} from "../../../api/orgApi";

function AddUnit(){

    const [districtName, setDistrictName] = useState()
    const name = createRef()
    const parentOrgName = createRef()
    const contact = createRef()
    const tel = createRef()
    const address = createRef()
    const remark = createRef()

    const addUnit = () => {
        const data = {
            districtName: districtName,
            name: getRefValue(name),
            parentOrgName: getRefValue(parentOrgName),
            contact: getRefValue(contact),
            tel: getRefValue(tel),
            address: getRefValue(address),
            remark: getRefValue(remark),

            type: 1,
            districtId: 691,
            parentOrgId: 1,
            status: 1,

        }

        console.log(data)
        addOrg(data).then(() => {

        })
    }

    const handleDistrictNameChange = (value) => {
        setDistrictName(value)
    }

    const back = () => {
        window.location.href = '../parking_unit?menu=parking_unit'
    }

    return(
        <div className={'add-unit-container'}>

            <div className={'add-unit-panel-item'}>
                <div className={'add-unit-panel-item-title'} style={{width: 60}}>
                    区域
                </div>
                <Select placeholder={'请选择区域'} onChange={handleDistrictNameChange}>
                    <Select.Option value={'区域一'}>
                        区域一
                    </Select.Option>
                </Select>
            </div>

            <div className={'add-unit-panel-item'}>
                <div className={'add-unit-panel-item-title'} style={{width: 80}}>
                    单位名称
                </div>
                <Input placeholder={'请填写单位名称'} ref={name}/>
            </div>

            <div className={'add-unit-panel-item'}>
                <div className={'add-unit-panel-item-title'} style={{width: 80}}>
                    所属单位
                </div>
                <Input placeholder={'请填写上级管理单位'} ref={parentOrgName}/>
            </div>

            <div className={'add-unit-panel-item'}>
                <div className={'add-unit-panel-item-title'} style={{width: 80}}>
                    联系人
                </div>
                <Input placeholder={'请填写联系人姓名'} ref={contact}/>
            </div>

            <div className={'add-unit-panel-item'}>
                <div className={'add-unit-panel-item-title'} style={{width: 80}}>
                    联系电话
                </div>
                <Input placeholder={'请填写联系电话'} ref={tel}/>
            </div>

            <div className={'add-unit-panel-item'}>
                <div className={'add-unit-panel-item-title'} style={{width: 80}}>
                    单位地址
                </div>
                <Input placeholder={'请填写单位地址'} ref={address}/>
            </div>

            <div className={'add-unit-panel-item'}>
                <div className={'add-unit-panel-item-title'} style={{width: 80}}>
                    备注
                </div>
                <Input placeholder={'请填写备注'} ref={remark}/>
            </div>

            <div className={'add-unit-panel'}>
                <Button type={'primary'} onClick={addUnit}>保存</Button>
                <Button onClick={back}>返回</Button>
            </div>
        </div>
    )
}

export default AddUnit